<template>
  <el-card
    :body-style="{ padding: showMoreFilter ? '20px 20px 1px 20px' : '20px' }"
  >
    <el-form ref="topForm" :model="form">
      <div class="searchForm-container">
        <div
          :class="
            showMoreFilter
              ? 'searchForm-container-form'
              : 'searchForm-container-form searchForm-height'
          "
        >
          <el-row :gutter="gutter">
            <el-col
              :span="$getSpan(layout, { xl: 6, lg: 8, md: 8, sm: 12, xs: 24 })"
              class="item-height"
            >
              <el-form-item prop="code">
                <el-input
                  v-model.trim="form.code"
                  clearable
                  placeholder="回款编号/发货申请编号/PI编号"
                />
              </el-form-item>
            </el-col>
            <el-col
              :span="$getSpan(layout, { xl: 6, lg: 8, md: 8, sm: 12, xs: 24 })"
              class="item-height"
            >
              <el-form-item prop="companyNameForeign">
                <el-select
                  v-model="form.companyNameForeign"
                  placeholder="请输入客户名称"
                  clearable
                  remote
                  filterable
                  :remote-method="remoteCompany"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in companyList"
                    :key="item.companyNameForeign"
                    :label="item.companyNameForeign"
                    :value="item.companyNameForeign"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :span="$getSpan(layout, { xl: 6, lg: 8, md: 8, sm: 12, xs: 24 })"
              class="item-height"
            >
              <el-form-item prop="saleName">
                <el-select
                  v-model="form.saleName"
                  placeholder="请输入销售名称"
                  clearable
                  remote
                  filterable
                  :remote-method="remoteApplyUser"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in applyUserList"
                    :key="index"
                    :label="item.accountName"
                    :value="item.accountName"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :span="$getSpan(layout, { xl: 6, lg: 8, md: 8, sm: 12, xs: 24 })"
              class="item-height"
            >
              <el-form-item prop="applyDate">
                <el-date-picker
                  v-model="form.applyDate"
                  type="daterange"
                  start-placeholder="起始申请日期"
                  end-placeholder="截止申请日期"
                  clearable
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col
              :span="$getSpan(layout, { xl: 6, lg: 8, md: 8, sm: 12, xs: 24 })"
              class="item-height"
            >
              <el-form-item prop="checkingStatus">
                <el-select
                  v-model="form.checkingStatus"
                  clearable
                  placeholder="请选择核账状态"
                  value=""
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in checkingStatusOptions"
                    :key="index + item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :span="$getSpan(layout, { xl: 6, lg: 8, md: 8, sm: 12, xs: 24 })"
              class="item-height"
            >
              <el-form-item prop="paymentStage">
                <el-select
                  v-model="form.paymentStage"
                  clearable
                  placeholder="请选择回款状态"
                  value=""
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in paymentStageOptions"
                    :key="index + item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :span="$getSpan(layout, { xl: 2, lg: 2, md: 2, sm: 2, xs: 2 })"
              class="item-height"
            >
              <el-button
                v-if="showMoreFilter"
                type="text"
                @click="showMoreFilter = false"
              >收起</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="searchForm-container-btn">
          <span style="display: flex; justify-content: flex-end">
            <el-button
              v-if="!showMoreFilter"
              type="text"
              @click="showMoreFilter = true"
            >更多筛选</el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="submitForm('topForm')"
            >查询</el-button>
            <el-button
              icon="el-icon-refresh-left"
              @click="resetForm('topForm')"
            >重置</el-button>
          </span>
        </div>
      </div>
    </el-form>
  </el-card>
</template>

<script>
import { listApplyUserQuery, listCompanyNameQuery } from '@/service/customer'
import { mapGetters } from 'vuex'
export default {
  name: 'SearchForm',
  props: {
    checkingStatusOptions: {
      type: Array,
      required: true,
      default: () => []
    },
    paymentStageOptions: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      gutter: 16,
      showMoreFilter: false,
      form: {
        code: '', // 发货申请编号
        companyNameForeign: '', // 客户名称
        saleName: '', // 申请人名称
        applyDate: [], // 申请日期
        checkingStatus: '0', // 核账状态
        paymentStage: '', // 回款状态
        approveStatus: '' // 审批状态,
      },
      companyList: [],
      applyUserList: []
    }
  },
  computed: {
    ...mapGetters(['layout']),
    buttonSpan() {
      return this.showMoreFilter ? 6 : 24
    }
  },
  mounted() {
    const { applyNo, isOverDue } = this.$route.query
    this.form.code = applyNo || ''
    this.form.isOverDue = Boolean(isOverDue) || false
    this.submitForm('topForm')
  },
  methods: {
    getSearchData() {
      const params = JSON.parse(JSON.stringify(this.form))
      const [applyStartDate, applyEndDate] = params.applyDate || []
      delete params.applyDate
      return Object.assign(params, {
        applyStartDate: applyStartDate ? `${applyStartDate} 00:00:00` : applyStartDate,
        applyEndDate: applyEndDate ? `${applyEndDate} 23:59:59` : applyEndDate
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('submitQuery', this.getSearchData())
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.$emit('submitQuery', this.getSearchData())
    },
    remoteCompany(query) {
      if (query.length < 100) {
        setTimeout(() => {
          this.listCompanyNameQueryHandle(query)
        }, 200)
      }
    },
    // 模糊查询客户名称
    async listCompanyNameQueryHandle(query) {
      const res = await listCompanyNameQuery({
        companyNameForeign: query,
        pageNum: 1,
        pageSize: 500
      })
      this.companyList = res.records || []
    },
    remoteApplyUser(query) {
      if (query.length < 100) {
        setTimeout(() => {
          this.listApplyUserQueryHandle(query)
        }, 200)
      }
    },
    async listApplyUserQueryHandle(query) {
      const res = await listApplyUserQuery({
        accountName: query,
        pageNum: 1,
        pageSize: 500
      })
      this.applyUserList = res.records || []
    }
  }
}
</script>

<style lang="scss" scoped>
.searchForm-container {
  display: flex;
  .item-height {
    height: 50px;
  }
  .searchForm-container-form {
    flex: 1;
  }
  .searchForm-height {
    height: 48px;
    overflow: hidden;
  }
  .searchForm-container-btn {
    width: 230px;
  }
}
</style>
